<template>
<div class="box">
  <el-steps :active="step" simple>
    <el-step v-for="(item, index) in stepArr"
             :key="index"
             :title="item.title"
             :icon="item.icon"></el-step>
  </el-steps>

  <component class="component" :is="stepArr[step-1].component"></component>

</div>
</template>

<script>
import ChangeDataSource from './changeDataSource'
import AppointInfo from './appointInfo'
import ImportData from './importData'
import MappingRelationship from './mappingRelationship'
import { mapFields } from 'vuex-map-fields'
export default {
  name: 'creatImport',
  components: { MappingRelationship, ImportData, AppointInfo, ChangeDataSource },
  data () {
    return {
      stepArr: [
        {
          title: '选择数据源',
          icon: 'el-icon-finished',
          component: 'ChangeDataSource'
        },
        {
          title: '指定导入信息',
          icon: 'el-icon-s-flag',
          component: 'AppointInfo'
        },
        {
          title: '表映射关系',
          icon: 'el-icon-s-ticket',
          component: 'MappingRelationship'
        },
        {
          title: '导入数据',
          icon: 'el-icon-upload',
          component: 'ImportData'
        }
      ]
    }
  },
  computed: {
    ...mapFields('importData/setImportDataStep', ['step'])
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.box{
  background: #fff;
  height: calc(100vh - 80px);
  padding: 10px 15px;
  border-radius: 6px;
  margin: 0 -10px;
  .component{
    height: calc(100% - 60px);
    margin-top: 15px;
  }
}
</style>
